Electron 实现启动项目添加loading页面（启动页） |
您所在的位置：网站首页 › electron __dirname › Electron 实现启动项目添加loading页面（启动页） |
Electron 实现启动项目添加loading页面（启动页）
|
1.搭建项目
最近在做 Electron-react 项目，需要做一个启动页，这里记录下如何去做的。就是实现一个启动loading动画。 这里项目使用的是成熟框架 electron-react-boilerplate.js.org/ ， # 克隆示例项目的仓库 git clone --depth=1 \ https://github.com/electron-react-boilerplate/electron-react-boilerplate \ your-project-name # 进入这个仓库 cd your-project-name # 安装依赖并运行 npm install npm start 复制代码 2. 为什么要添加一个loading页面（启动页），而不是直接启动应用？很明显，肯定是为了优化用户体验，不能让用户觉得我们的应用启动慢。而且根据需求不同，启动时候的要求也会有不同，比如有的应用需要检测升级状态、登陆状态或一些附加业务检测比如麦克风和摄像头，还有些应用需要加载大量的本地数据等。我们作为一名开发人员，肯定是希望应用双击立即进入，但是代码的运行和数据加载都是需要时间的，是做不到立即进入的，都会有一个等待时间。因而在用户启动项目的时候，给用户一个 loading 页面是最好的，让用户知道有一个应用加载时间，而不会让用户认为应用卡死或者崩溃了。 3.方案实现其实很简单，就是在项目启动的时候增加一个窗口（即 loading 页），在项目没有真正启动的情况下告诉用户应用正在启动，应用准备完毕后关闭。主要方法是监听我们主窗口进程，准备就绪后关闭启动窗口即可。 首先我们需要创建一个 loading 的 html 页面（这里应该没人不会，哈哈），可以对我们的启动窗口进行绘制，可以添加一些动态效果。接着在主进程中创建生成 loading 窗口的方法，同时接收一个回调函数在 loading 窗口生成时触发。 let loading;// 先定义 loading const showLoading = (cb) => { loading = new BrowserWindow({ show: false, frame: false, // 无边框（窗口、工具栏等），只包含网页内容 width: 160, height: 180, resizable: false, // transparent: true, // 窗口是否支持透明，如果想做高级效果最好为true }); loading.once("show", cb); loading.loadURL(path.join(__dirname, '../renderer/utils/loading.html')) loading.show(); }; 复制代码在项目启动时调用 showLoading 方法，并传入创建主窗口的方法。 app .whenReady() .then(() => { // createWindow(); // 之前是 createWindow() ，改为直接加载 showLoading 里面传入主窗口方法 showLoading(createWindow) app.on('activate', () => { // On macOS it's common to re-create a window in the app when the // dock icon is clicked and there are no other windows open. if (mainWindow === null) createWindow(); }); }) .catch(console.log); 复制代码最后需要在展示主页面之前关闭 loading 启动页 在主窗口准备就绪的时候关闭我们的启动页，这里不能直接关闭窗口，可能会出现闪屏现象，需要先将窗口隐藏再进行关闭。 上面代码：app 监听到 ready 事件之后，执行 showLoading 方法，传入 createWindow 方法为参数，首先创建 loading 窗口，注册 show 事件，loading 窗口加载 loading.html 后，去加载 mainWindow 窗口，该窗口加载了项目内容，并注册了 ready-to-show 事件，该时间用于关闭 loading 窗口，显式 mainWindow 窗口。 |
【本文地址】